<template>
	<view class="big-box flex-col align-center">
		<!-- <top-navigation :isFix='true' :isShow="true" bgColor='#CC1D1D' backIconColor='#FFF'>
		</top-navigation> -->
		<u-toast ref="uToast"></u-toast>
		<!-- <view class="notice-box center" v-if="getCarOrderStatus.value==0">
			<view class="notice">
				<u-notice-bar icon='volume' bgColor='RGBA(184, 26, 26, 1)' color='#FFF' text="专车司机会主动联系您前来接驾，如需取消行程，请联系客服人员"></u-notice-bar>
			</view>
		</view> -->
		
		<view class="nav-bg">
			<view class="success-tip">
				<!-- 订单状态 -->
				{{getCarOrderStatus.label}}
			</view>
			<view class="success-time">
				<text v-if="getCarOrderStatus.value==0 || getCarOrderStatus.value==3  ">{{orderInfo.pay_time}} 下单</text>
				<text v-if="getCarOrderStatus.value==2">{{orderInfo.cancel_at}} 取消</text>
			</view>
			<view class="flex-col align-center" v-if="getCarOrderStatus.value==0 || getCarOrderStatus.value==1">
				<view class="qrcode center">
					<x-img static v-if="orderInfo.code" :src="orderInfo.code || baseImg+'/static/hexiao.png'" width="300rpx" height="300rpx" radius='10rpx'></x-img>
					<x-img static v-if="getCarOrderStatus.value==1" :src="baseImg+'/static/hexiao.png'" width="250rpx" height="250rpx" radius='10rpx'></x-img>
					<view class="hei-xiao center"  v-if="getCarOrderStatus.value==1">
						已核销
					</view>
				</view>
				<view class="qrcode-text">
					券码：0,{{orderInfo.id}}
				</view>
			</view>
		
				<image class="success-icon" src="/static/images/car/success-icon.png" mode=""></image>
		</view>
		<view class="">
			
			<view class="user-info mt-20">
				<view class="user-title ">
					<view class="user-tits">
						预定信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="user-sty justify-start align-center border-tnone">
					<view class="user-tit">
						服务类型
					</view>
					<view class="tab-sex justify-between">
						<!-- <view class="tab-item center" @tap="gender=index" v-for="(item,index) in genderList"
							:style="{background:index==gender?'':'#B9B9B9'}">
							{{item.label}}
						</view> -->
						{{contentInfo.serve}}
					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						贵宾厅
					</view>
					<view class="user-con">
						{{contentInfo.title}}
				
					</view>
				</view>
				<view class="user-sty justify-start align-center border-t-b">
					<view class="user-tit">
						车次
					</view>
					<view class="user-con">
						{{contentInfo.flight_num}}
					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						预定时间
					</view>
					<view class="user-con">
						{{contentInfo.usage_time}}

					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						接机人数
					</view>
					<view class="user-con">
						{{contentInfo.people_num}} 人

					</view>
				</view>
				<!-- <view class="user-sty justify-start align-center">
					<view class="user-tit">
						起始地点
					</view>
					<view class="user-con">
						{{(getArriveType==0 || getArriveType==2) ?contentInfo.star_site: contentInfo.end_site}}
					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						目标地点
					</view>
					<view class="user-con">
						{{(getArriveType==0 || getArriveType==2) ?contentInfo.end_site: contentInfo.star_site}}
					</view>
				</view> -->
				<!-- <view class="user-sty justify-start align-center">
					<view class="user-tit">
						贵宾厅
					</view>
					<view class="user-con">
						{{contentInfo.title}}
				
					</view>
				</view> -->
			</view>
			<view class="user-info" v-for="(v,k) in contentInfo.users" :key="k">
				<view class="user-title ">
					<view class="user-tits">
						用户信息{{contentInfo.users.length==1?'':k+1}}
					</view>
					<view class="line">
			
					</view>
				</view>
				<view class="user-sty justify-start align-center border-tnone">
					<view class="user-tit">
						姓名
					</view>
					<view class="tab-sex justify-between">
						<!-- <view class="tab-item center" @tap="gender=index" v-for="(item,index) in genderList"
							:style="{background:index==gender?'':'#B9B9B9'}">
							{{item.label}}
						</view> -->
						{{v.user_name}}({{v.sex==0?'先生':'女士'}})
					</view>
				</view>
				<view class="user-sty justify-start align-center border-t-b">
					<view class="user-tit">
						手机号
					</view>
					<view class="user-con">
						{{v.user_phone}}
					</view>
				</view>
			</view>
		<view class="order-info" v-if="getCarOrderStatus.value==0 || getCarOrderStatus.value==3">
			<view class=" justify-start align-center" style="height: 90rpx;">
				<view class="order-title-one">
					<view class="order-tag ">
						订单编号
					</view>
				</view>
				<view class="">
					{{orderInfo.order_num}}
				</view>
			</view>
			<view class="info-sty justify-start align-center">
				<view class="order-title">
					订单金额
				</view>
				<view class="order-content">
					{{orderInfo.price_total}} 元
				</view>
			</view>
			<view class="info-sty justify-start align-center">
				<view class="order-title">
					支付方式
				</view>
				<view class="order-content">
					{{getCusPayment}}
				</view>
			</view>
			<view class="info-sty justify-start align-center">
				<view class="order-title">
					支付{{getCusPayment}}
				</view>
				<view class="order-content">
					{{orderInfo.pay_integral}} {{getCusPayment=='微信'?'元':''}}
				</view>
			</view>
		
		</view>
		</view>
		<!-- <view class="go-pay center">
			立即支付
		</view> -->
		<cancel-modal v-if="cancelShow" :isShow='cancelShow' @comfirm='onClick' @close='close'
			></cancel-modal>
		<bottom-btn @onClick='onClick'>取消订单</bottom-btn>
		<!-- <bottom-nav @pay='foodPay' :money="0"></bottom-nav> -->
		<payModal :carNote='car_note' v-if="payShow" :isShow='payShow'
			@close='payShow=false'></payModal>
	</view>
</template>

<script>
	import payModal from "../modal/payModal.vue"
	import { mapActions } from 'vuex'
	import {
arriveType,cusPayment,carOrderStatus
	} from '@/utils/constants.js'
	export default {
		components:{
			payModal
		},
		data() {
			return {
				orderInfo:{
					cus_payment:0,
					state:0
				},
				contentInfo:{
					split_type:'接机',
					users:[]
				},
				payShow:false,
				order_id:null,
				gender: 0,
				genderList: [{
						val: 0,
						label: '先生'
					},
					{
						val: 1,
						label: '女士'
					},
				],
				cancelShow:false,


			}

		},
		computed: {
			//获取订单状态
			getCarOrderStatus(){
				return carOrderStatus.find(item=>item.value == this.orderInfo.state)
			},
//获取服务类型
			// getArriveType() {
			// 	return arriveType.find(item=>item.name == this.contentInfo.split_type).ind
			// },
			//获取服务类型
						getCusPayment() {
							return cusPayment.find(item=>item.value == this.orderInfo.cus_payment).label
						},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			tabsHeight() {
				return `calc(354rpx + (${this.deviceModel?parseInt(this.statusHeight)/2+'rpx':'0rpx'}))`;
			},
			baseImg(){
				return this.$baseImg
			}

		},
		onLoad(o) {
			if(o.order_id){
				this.order_id = o.order_id
				this.orderDetail()
			}
		},
		onShow() {

		},
		methods: {
			...mapActions(['getOrderDetail','carCancelOrder']),
			close(){
				this.cancelShow=false
			},
			async orderDetail() {
				let res = await this.getOrderDetail({
					id: this.order_id
				})
				this.orderInfo = res.info
				this.contentInfo = res.content
				console.log('订单详情', res);
			},
			
			async onClick(){
				
				if(!this.cancelShow){
					this.cancelShow = true
					return
				}
				uni.showLoading({
					title: '正在取消'
				});
				let _this = this
				let res = await this.carCancelOrder({
					id: this.order_id
				})
				if(res==this.order_id){
					this.cancelShow=false
					uni.hideLoading();
					uni.$toast('取消成功').then(()=>{
						_this.$navto('/pages/index/index')
					})
					
				}
				console.log('订单取消', res);
			},
			foodPay() {
				this.$navto('/car/order/order-status')
			}
		},
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		padding: 0 0 150rpx 0;
		min-height: 100vh;
		background: rgba(243, 243, 243, 0.95);
		.notice-box{
			width: 100vw;
			background: #CC1D1D;
			.notice{
				width: 670rpx;
				height: 73rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				overflow: hidden;
			}
		}
		
		.user-info {
			margin-bottom: 25rpx;
			padding: 32rpx 30rpx 0;
			width: 670rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 189rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}


			.border-t-b {
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}
			.border-tnone {
				border-top: none;
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}
			.user-sty {
				height: 90rpx;
				@extend .border-t-b;
				.user-tit {
					width: 112rpx;
					margin-right: 72rpx;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}

				.tab-sex {

					.tab-item {
						font-family: Source Han Sans SC, Source Han Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						flex: 1;

					}
				}

				.user-con {
					flex: 1;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
				}
			}
		}

	

		.go-pay {
			position: fixed;
			z-index: 12;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			width: 670rpx;
			height: 90rpx;
			background: #CC1D1D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.nav-bg {
			padding: 30rpx 40rpx 30rpx;
			width: 750rpx;
			// height: 510rpx;
			background: #CC1D1D;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: relative;
			.success-icon{
				top: 36rpx;
				position: absolute;
				right: 40rpx;
				width: 144rpx;
				height: 144rpx;
			}
			.success-tip {
				width: 420rpx;
				height: 61rpx;
				font-weight: bold;
				font-size: 42rpx;
				color: #FFFFFF;
			}

			.success-time {
				margin-top: 15rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				
			}
			.qrcode{
				margin-top: 30rpx;
				width: 254rpx;
				height: 254rpx;
				background: #FCFCFC;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108,108,108,0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				overflow: hidden;
				position: relative;
				.hei-xiao{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 254rpx;
					height: 72rpx;
					background: rgba(0,0,0,0.6);
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108,108,108,0.1);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
			.qrcode-text{
				margin-top: 15rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.order-info {
			position: relative;
			margin: 25rpx 0 25rpx;
			width: 670rpx;
			// height: 541rpx;
			padding: 0 33rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.order-title-one {
				width: 112rpx;
				margin-right: 72rpx;

				.order-tag {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}
			}

			.info-sty {
				height: 90rpx;
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.order-title {
				width: 112rpx;
				margin-right: 72rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.order-content {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.user-title {
			margin-bottom: 9rpx;
			width: max-content;
			position: relative;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			z-index: 1;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 147rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}

			.user-tits {
				position: relative;
				z-index: 2;
			}


		}
	}
</style>